<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="org.apache.shiro.SecurityUtils" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/jQuery/jquery-1.8.0.js"></script>
<title>HOME</title>
</head>
<body>
    <% if(SecurityUtils.getSubject().isAuthenticated()) {%>

	     <h1>User principal has been authenticated!</h1>
	     <h2>Welcome, <%=SecurityUtils.getSubject().getPrincipal() %></h2>
	     <input id="logout" type="button" value="logout"/>
	     
	     <script>
	             $('#logout').click(function(){
	                    $.ajax({
	                           url: 'authentication.json',
	                           type: 'post',
	                           data: {
	                        	   REQ_MESSAGE : '{"REQ_HEAD":{"OPERATE":"logout"},"REQ_BODY":{}}'
	                           },
	                           dataType: 'text',
	                           success: function(data){
	                                   var resp = eval('(' + data + ')');
	                                   if(resp.RSP_HEAD.RSP_STATUS == "1"){
	                                       location.href='default.html'
	                                   } else {
	                                       alert(resp.RSP_HEAD.MSG);
	                                   }
	                           }
	                    
	                    });
	             });
	        </script>
	        <br/>
	        <jsp:include page="sample/crud.jsp"/>
	        <jsp:include page="sample/upload.jsp"/>
	     
	     <% } else { %>
	         <h1>Login</h1>
	         <form id="target">
	               <table>
	                     <tr>
	                          <td>username</td>
	                          <td><input id="uf" type="text" name="username"/></td>
	                     </tr>
	                     <tr>
	                          <td>password</td>
	                          <td><input id="pf" type="password" name="password"/></td>
	                     </tr>    
	                     <tr>
	                     	  <td>captcha</td>
	                     	  <td><input type="text" name="captcha" id="cf"/></td>
	                     </tr> 
	                     <tr>
	                     	<td colspan="2">
	                     	<img id="captcha" src="captcha.img?OPERATE=handleCaptcha" alt="captcha"/></td>
	                     </tr>
	               </table>
	               <input id="other" type="button" value="ajax submit"/>     
	         </form>    
	         <script>
	             $('#other').click(function(){
	                    $.ajax({
	                           url: 'authentication.json',
	                           type: 'post',
	                           data: {

	                           		REQ_MESSAGE : '{"REQ_HEAD":{"OPERATE":"authenticate"},"REQ_BODY":{'
									+ '"username":"' + $('#uf').val() + '",'
									+ '"password":"' + $('#pf').val() + '",'
									+ '"captcha":"' + $('#cf').val() + '"'
	                           		+'}}'
	                           },
	                           dataType: 'text',
	                           success: function(data){
	                                   var resp = eval('(' + data + ')');
	                                   if(resp.RSP_HEAD.RSP_STATUS == "1"){
	                                       location.href='default.html'
	                                   } else {
	                                	   alert(resp.RSP_HEAD.MSG);
	                                	   $("#captcha").attr("src", "captcha.img?OPERATE=handleCaptcha&nocache=" 
	                                			   + Math.floor(Math.random()*100000000 + 100000000));
	                                   }
	                           }
	                    
	                    });
	             });
	        </script>
	     
	     <% } %>
</body>
</html>
